<template>
  <div class="studyTestWrap">
    <div class="titleBar">
      <b>学习评测</b>
      <i>检查学科弱点，促进学习提高</i>
    </div>
    <div class="issueBox">
      <p>通过本版块相关问题的测试，可从一定维度评价学生的学习动机、兴趣、方法和学习环境。测评结果以学习状态非常好、良好、一般和不佳呈现，帮助学生提高自我认知，并对当前的学习状态进行文字提醒。</p>
      <!-- <span class="score">频率：总是-４　经常-３　有时-２　很少-１　从未-０</!-->
      <div class="contentBox">
        <div v-for="(item, index) in issueList" :key="index">
          <div v-show="index === tabNum">
            <div class="titles">
              <i>{{ index * 1 + 1 }}</i>
              <b>/{{ issueList.length }}.</b><b>{{ item.title }}</b>
            </div>
            <div class="studyAnswer">
              <span v-for="(its, $index) in item.answers" :key="$index + 100" class="" @click="clcyes($index, $index * 1 + 1, index)"
                ><img :src="tabindex === $index ? img_s : img_n" alt="" /><b>{{ its }}</b></span
              >
            </div>
            <span v-if="tabNum < issueList.length - 1" class="btn" @click="next(index)">下一题</span>
            <div v-else @click="saveRecord(index)" class="btn">提交</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import studyData from '~/static/json/studyTest.json'
export default {
  components: {},
  data() {
    return {
      tabindex: 20,
      tabNum: 0,
      img_s: require('~/static/images/icon_radio_s.png'),
      img_n: require('~/static/images/search_icon_nor.png'),
      issueList: studyData,
      mbtiScore: [],
    }
  },
  watch: {},
  mounted() {},
  methods: {
    saveRecord(indexs) {
      if (!this.mbtiScore[indexs]) {
        this.$vux.toast.text('您还未做选择')
        return
      }
      let sum = this.mbtiScore.join(',')
      this.$router.push({
        path: '../sxAssess/testResult?id=4&score=' + sum,
      })
    },
    clcyes(indexs, score, index) {
      this.tabindex = indexs
      this.chooseStr = score
      this.mbtiScore[index] = score
    },
    next(indexs) {
      if (!this.mbtiScore[indexs]) {
        this.$vux.toast.text('您还未做选择')
        return
      }
      this.tabNum = indexs + 1
      this.tabindex = ''
    },
  },
}
</script>

<style lang="less" scoped>
.studyTestWrap {
  width: 6.9rem;
  height: auto;
  padding-bottom: 0.5rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
  border-radius: 0.2rem;
  margin: 0.3rem auto;
  //   bg_luqu
  .titleBar {
    height: 1.8rem;
    width: 100%;
    background: url('~/static/images/bg_xuexi.png') no-repeat;
    background-size: 100% 100%;
    padding-left: 0.3rem;
    padding-top: 0.4rem;
    b,
    i {
      display: block;
    }
    b {
      font-size: 0.4rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
    }
    i {
      font-size: 0.28rem;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
  .issueBox {
    height: auto;
    padding: 0.3rem;
    box-sizing: border-box;
    p {
      font-size: 0.26rem;
      font-weight: 400;
      color: rgba(34, 34, 34, 1);
      line-height: 0.45rem;
    }
    .score {
      display: block;
      height: 0.8rem;
      background: rgba(247, 247, 250, 1);
      border-radius: 0.1rem;
      text-align: center;
      line-height: 0.8rem;
      font-size: 0.24rem;
      font-weight: 400;
      color: rgba(34, 34, 34, 1);
      margin-top: 0.3rem;
    }
    .contentBox {
      padding-top: 0.3rem;
      border-top: 0.01rem solid rgba(229, 232, 237, 1);
      margin-top: 0.3rem;
      .titles {
        i,
        b {
          font-size: 0.34rem;
          font-weight: 600;
          color: rgba(34, 34, 34, 1);
        }
      }
      .studyAnswer {
        margin-top: 0.5rem;
        span {
          text-align: left;
          display: block;
          margin-top: 0.3rem;
          img {
            width: 0.28rem;
            height: 0.28rem;
          }
          b {
            font-size: 0.3rem;
            font-weight: 600;
            color: rgba(34, 34, 34, 1);
            margin-left: 0.1rem;
          }
        }
      }
      .btn {
        width: 100%;
        height: 0.88rem;
        background: rgba(255, 173, 13, 1);
        border-radius: 0.5rem;
        text-align: center;
        line-height: 0.88rem;
        font-size: 0.3rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 1);
        margin-top: 0.5rem;
        display: block;
      }
    }
  }
}
</style>
